<!DOCTYPE html>
<head>
    <title>Apiote: Contact</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <script src="/js/jquery.min.js"
        integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg=="
        crossorigin="anonymous"></script>

    <script src="/js/openpgp.min.js"
        integrity="sha512-CMshKwcY9hEAPeQNNt1dV5atD1xp8jZZmyNmnvf8u6T06IARhQNi6ZgSU8XxRR/9NAN4oLkspsnOFX3/4uO5hA=="
        crossorigin="anonymous"></script>
    <script src="/js/js-yaml.min.js"
        integrity="sha512-55KnQjtPrGi70932464nQmzH0PA64NirgYFQiT019lp2Fo7IvNEtaR4e8VUjZ4OokOT3JXcFNZn+1Sy/rcEcNw=="
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/styles/material-components-web.css"
        integrity="sha512-xKSgTutWqX2F22Uxywtig03sHCUxl4pJw2dzeIxH1EDvbEwhg5M1/KBUvrxNDiTe5HSjHRLdaW6XBhuYawROQw=="
        crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/fira.min.css"
        integrity="sha512-jEf2ipTyK37+rvwmgG9886e/Joq2bqciYEXUAZyHmx86yoLxyhX2DO/w7TvykReRK4yOJteokVn1DLHytAsvzQ=="
        crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/plex.min.css"
        integrity="sha512-3MJpT2GuM1SLjy9T9gSOWBl3cWJpuRABFapfiubH6XuK2jLawq8h5h3cSjyU2Ezc9attdv7jO4TpSpREPA6eHQ=="
        crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/material-icons.min.css"
        integrity="sha512-0oMXNxqi/ASlhfm2fCxg2wCl8Wo8HgL7fOgNOIz8P3nwbIe/VBeaC0h8lVz1NH3T4litHeGjshwUZx790RqJqQ=="
        crossorigin="anonymous">

    <link rel="stylesheet" href="/styles/main.css"
        integrity="sha512-djKhjK/Sdfon9o4t/hrscsou5arv5NzRQHRvLf7A+fe+5AzHJR82tjhkXd/ZPu0JssOd6W3N19nD0ntST+4kuw=="
        crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/form.css"
        integrity="sha512-kLO67TyPVKw8e076G3iUrGFN7ivuVQbvHzpJJ5inM52q2Ql+EnLL0O5nE+xrZQvS0in+CHS/MaylnDJT6YwNGA=="
        crossorigin="anonymous">

    <meta name="theme-color" content="#911f1b">

    <link rel="shortcut icon" href="/img/favicon/favicon.ico">
	<link rel="icon" sizes="16x16 32x32 64x64" href="/img/favicon/favicon.ico">
	<link rel="icon" type="image/png" sizes="196x196" href="/img/favicon/favicon-192.png">
	<link rel="icon" type="image/png" sizes="160x160" href="/img/favicon/favicon-160.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96.png">
	<link rel="icon" type="image/png" sizes="64x64" href="/img/favicon/favicon-64.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png">
	<link rel="apple-touch-icon" href="/img/favicon/favicon-57.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/favicon-114.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/favicon-72.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/favicon-144.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/favicon-60.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/favicon-120.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/favicon-76.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/favicon-152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/favicon-180.png">
	<meta name="msapplication-TileColor" content="#911f1b">
	<meta name="msapplication-TileImage" content="/img/favicon/favicon-144.png">
    <meta name="msapplication-config" content="/img/favicon/browserconfig.xml">


</head>
<body>
    <div class="drawer-container-flex">
        <aside class="mdc-drawer mdc-drawer--permanent mdc-typography">
            <nav class="mdc-drawer__drawer">
                <header class="mdc-drawer__header">
                    <div class="mdc-drawer__header-content">
                        Where now?
                    </div>
                </header>
                <nav class="mdc-drawer__content mdc-list">
                    <a class="mdc-list-item" href="/">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>Home
                    </a>
                    <a class="mdc-list-item" href="/about">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">person</i>About
                    </a>
                    <a class="mdc-list-item" href="/donate">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">attach_money</i>Donate
                    </a>
                    <a class="mdc-list-item" href="/manifestos/">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>Manifestos
                    </a>
                    <!-- tod padding
                    <nav class="mdc-drawer__content mdc-list">
                    <a class="mdc-list-item" href="/manifestos/privacy">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true"></i>Privacy
                    </a>
                    </nav>
                    -->
                    <a class="mdc-list-item" href="/programs/">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">devices</i>Programs
                    </a>
                    <a class="mdc-list-item" href="/credits/">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">copyright</i>Credits and legal
                    </a>
                    <a class="mdc-list-item mdc-list-item--activated" href="/contact/">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">contact_support</i>Contact
                    </a>
                    <div class="drawer-bottom">
                        <div class="mdc-drawer__toolbar-spacer"></div>
                        <a href="/about/js.html" data-jslicense="1">
                            JavaScript license information
                        </a>
                    </div>
                </nav>
            </nav>
        </aside>
        <header class="mdc-top-app-bar">
            <div class="mdc-top-app-bar__row">
                <section class="top-bar-menu-button mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <i class="material-icons mdc-top-app-bar__navigation-icon">menu</i>
                    <span class="mdc-top-app-bar__title">Contact</span>
                </section>
            </div>
        </header>
        <main class="mdc-top-app-bar--fixed-adjust">
            <div class="mdc-layout-grid">
                <div class="mdc-layout-grid__inner">
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-1-mobile mdc-layout-grid__cell--span-3-desktop">
                    </div>
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10-tablet mdc-layout-grid__cell--span-10-mobile mdc-layout-grid__cell--span-6-desktop">
                        <div class="mdc-card no-js-card">
                            <h2>JavaScript is off</h2>
                            <p>Encryption requires that JavaScript be on. It’s <a href="https://notabug.org/apiote/website">Software Libre.</a></p>
                        </div>
                        <div class="mdc-card contact-card">
                            <div class="mdc-text-field mdc-text-field--with-leading-icon">
                                <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">person</i>
                                <input type="text" id="name" class="mdc-text-field__input">
                                <label class="mdc-floating-label" for="name">Name</label>
                                <div class="mdc-line-ripple"></div>
                            </div>
                            <div class="mdc-text-field mdc-text-field--with-leading-icon">
                                <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">email</i>
                                <input type="text" id="email" class="mdc-text-field__input">
                                <label class="mdc-floating-label" for="email">Email address</label>
                                <div class="mdc-line-ripple"></div>
                            </div>
                            <div class="mdc-text-field mdc-text-field--textarea">
                                <textarea id="message" class="mdc-text-field__input" required rows="8" cols="80"></textarea>
                                <label for="message" class="mdc-floating-label">Message</label>
                            </div>
                            <div class="bots mdc-text-field">
                                <input type="text" id="hidden" class="mdc-text-field__input">
                                <label for="hidden" class="mdc-floating-label">Leave this blank</label>
                                <div class="mdc-line-ripple"></div>
                            </div>
                            <div class='do-button'>
                                <button class="mdc-button mdc-button--raised">
                                    <i class="material-icons mdc-button__icon" aria-hidden="true">send</i>
                                    send
                                </button>
                            </div>

                            <hr class="note-separator"/>
                            <p class="note">While name and email address are not required, mind that I won’t be able to respond if You don’t provide them</p>
                            <p class="note">All of the fields are encrypted locally with my public key so only whoever holds my private key (hopefully, that’s me) will be able to decrypt Your name, email address, and the message.</p>
                        </div>
                        <div class="mdc-card contact-card-sent">
                            <h1>Thank You!</h1>
                            <h2>Your message has been sent</h2>
                        </div>
                    </div>
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-1-mobile mdc-layout-grid__cell--span-3-desktop">
                    </div>
                </div>
            </div>
            <div class="mdc-snackbar"
                 aria-live="assertive"
                 aria-atomic="true"
                 aria-hidden="true">
                <div class="mdc-snackbar__text"></div>
                <div class="mdc-snackbar__action-wrapper" style="display: none">
                    <button type="button" class="mdc-snackbar__action-button"></button>
                </div>
            </div>
        </main>
    </div>
    <script src="/js/material-components-web.js"
        integrity="sha512-fzmFt2MbZhS3Cwv9gSX+jRqpfUdaKupP0WbJyaK09Och9eMm8n1ol1fnh8EEJ1sH5HzG16etbpejWBEMvXV5ow=="
        crossorigin="anonymous"></script>

    <script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt GNU-AGPL-v3.0
    $('.no-js-card').css('display', 'none')
    $('.contact-card').css('display', 'block')
    window.mdc.autoInit();
    const topAppBarElement = document.querySelector('.mdc-top-app-bar');
    let topAppBar = new mdc.topAppBar.MDCTopAppBar(topAppBarElement);


    textFields = document.querySelectorAll('.mdc-text-field')
    for (i in textFields) {
        if (isNaN(i)) {
            continue;
        }
        new mdc.textField.MDCTextField(textFields[i]);
    }

    new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));
    $('.top-bar-menu-button').css('display', 'initial');
    $('.mdc-drawer--permanent').removeClass("mdc-drawer--permanent").addClass("mdc-drawer--temporary");
    $('.drawer-bottom').css('width', '25%');

    let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
    document.querySelector('.mdc-top-app-bar__navigation-icon').addEventListener('click', () => drawer.open = true);
// @license-end
    </script>
</body>
</html>
